@import url(./common.css);


main{
    background-color: #000;
    position: relative;
    overflow: hidden;
    .backGround{
        color:#666;
        font-weight: bold;
        font-size: 9rem;
        position: absolute;
        top: 0;
        margin: 1.3333rem auto;
        text-align: center;
    }
    .sayingContainer{
        margin-top: .2667rem;
        position: relative;
        height: 2rem;
        width: 9.4533rem;
        border-radius: .0667rem;
        background-color: #fff;
        .choice{
            position: absolute;
            display: flex;
            justify-content: space-around;
            width: 4.8rem;
            margin-left: 1rem;
            top: 50%;
            transform: translate(0,-50%);
            div{
                height: 1.2667rem;
                flex:1 1 auto;
                margin-left: 1.3333rem;
                img{
                    width: .8533rem;
                    height: auto;
                }
                p{
                    color: #000000;
                    text-align: center;
                    font-size: .3333rem;
                }
            }
            div:first-child{
                margin: 0;
            }
        }

        .saying{
            img{
                height: 1.7067rem;
            }
        }

        .background{
            position: absolute;
            right: .3467rem;
            bottom: .1867rem
        }
    }

    .starContainer{
        height: 2.6rem;
        width: 9.4533rem;
        margin-top: .2667rem;
        display: flex;
        justify-content: space-around;
        align-items: center;

        div{
            flex: 0 0 auto;
            background-color: #fff;
            height: 2.3733rem;
            width: 2.6667rem;
            border-radius: .0667rem;
            display: flex;
            position: relative;
            flex-flow: column ;
            box-shadow: 0 .0267rem .2667rem #BABABA;
            h3{
                position: absolute;
                font-size: .24rem;
                color: #666;
                top: .4rem;
                left: 1.2267rem;
            }
            p{
                position: absolute;
                color: #BABABA;
                font-size: .2133rem;
                top: .8rem;
                left: 1.2267rem;
            }
            p:last-child{
                top: .2rem;
                left: 0;
                position: relative;
                padding: 0 .2267rem;
            }
        }
        div::before{
            height: .8267rem;
            width: .8267rem;
            border-radius: 50%;
            display: inline-block;
            background-color: #BFDAFF;
            content: "";
            margin-top: .2rem;
            margin-left: .2267rem;
            background-image: url(../images/Medalion.png);
            background-size: .8267rem .8267rem;
        }
        div::after{
            height: .63rem;
            line-height: .63rem;
            width: .63rem;
            content: "+";
            font-size: .4rem;
            text-align: center;
            border-radius: 50%;
            background-color: #1E5AF3;
            position: absolute;
            right: .2rem;
            bottom: -0.2rem;
        }
    }

    .line{
        background-color: #171717;
        height: .1333rem;
        margin-top: .4667rem;
    }

    h1{
        font-size: .5333rem;
        width: 9.4533rem;
        margin-top: .4667rem;
    }
    .circle{    
        height: 6.6667rem;
        width: 9.4533rem;
        margin-top: .4667rem;
        background-color: #fff;
    }
    .circle:last-child{
        margin-bottom: 2rem;
    }
}

